import React, { Component } from 'react'
import { Route, Link, Routes, NavLink } from 'react-router-dom'
import Home from './pages/Home'
import About from './pages/About'
import News from './pages/News'
import Message from './pages/Message'
import Detail from './pages/Detail'

// import Test from './pages/Test'
export default function App() {
  return (
    <div>
      <div className="row">
        <div className="col-xs-offset-2 col-xs-8">
          <div className="page-header">
            <h2>React Router Demo</h2>
          </div>
        </div>
      </div>
      <div className="row">
        <div className="col-xs-2 col-xs-offset-2">
          <div className="list-group">
            <NavLink
              // style={({ isActive }) => {
              //   // return

              //   return isActive ? { backgroundColor: 'red' } : {}
              // }}
              className="list-group-item"
              to="/about"
            >
              About
            </NavLink>
            <NavLink className="list-group-item" to="/home" end>
              Home
            </NavLink>
          </div>
        </div>
        <div className="col-xs-6">
          <div className="panel">
            <div className="panel-body">
              <Routes>
                <Route path="/" element={<Home></Home>}></Route>
                <Route path="home" element={<Home></Home>}>
                  {/* v6中,嵌套路由的前端规则代码就写在父级路由前端规则代码的子节点 */}
                  <Route path="news" element={<News></News>}></Route>
                  <Route path="message" element={<Message></Message>}>
                    <Route
                      path="detail/:id"
                      element={<Detail></Detail>}
                    ></Route>
                  </Route>
                </Route>
                <Route path="about" element={<About></About>}></Route>
                {/* <Route path="/test">
                  <Route path="/test/xxx" element={<Test></Test>}></Route>
                </Route> */}
              </Routes>
              {/* <Home></Home>
              <About></About> */}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
